/* eslint-disable array-callback-return */
import React from 'react';
import { connect } from 'dva';
import { Modal, Spin, Button } from 'antd';
import DescriptionList from '@/components/DescriptionList';
import { getArryStringBySymbol } from '@/utils/utils';

const { Description } = DescriptionList;

@connect(({ publicdata, loading, login }) => ({
  login,
  accuUpdateData: publicdata.accuInfo, // 单立户
  biglibraryData: publicdata.accuBigInfo, // 大库
  loading:
    loading.effects['publicdata/fetchAccuDetailInfo'] ||
    loading.effects['publicdata/fetchDetailAccuInforPage'],
}))
class AccuModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      userType: 1,
      payWay: null, // 区分是单立户或者大库 (缴费方式)
      respList: null,
      accuLsPkgIdsList: null,
      isExceedCeiling: null,
    };
  }

  componentDidMount() {
    const {
      onRef,
      login: { systemList },
    } = this.props;
    onRef(this);
    let userType;
    systemList.map(item => {
      if (item.isSelected) {
        userType = item.sysCode;
      }
    });
    this.setState({ userType });
  }

  // 获取公积金账户详情信息
  getAccuDetail = (custAccuAccoId, payWay) => {
    const { dispatch } = this.props;
    if (!custAccuAccoId) {
      return;
    }
    this.setState({ modalVisible: true, payWay });
    if (payWay === 1) {
      // 单立户
      dispatch({
        type: 'publicdata/fetchAccuDetailInfo',
        payload: {
          custAccuAccoId,
        },
      }).then(response => {
        if (response.success && response.data) {
          if (response.data.respList && response.data.respList.length) {
            response.data.respNameList = getArryStringBySymbol(response.data.respList, 'respName');
          } else {
            response.data.respNameList = '全部';
          }
        }
      });
    } else {
      // 大库
      dispatch({
        type: 'publicdata/fetchDetailAccuInforPage',
        payload: {
          accuAccoId: custAccuAccoId,
        },
      }).then(response => {
        if (response.success && response.data) {
          let respListArr = '';
          if (response.data.respList.length) {
            response.data.respList.forEach(c => {
              respListArr += `${c.respName},`;
            });
          }
          respListArr = respListArr.slice(0, respListArr.length - 1);
          const accuArr = [];
          if (response.data.accuPkgList.length) {
            response.data.accuPkgList.map(c => {
              accuArr.push(c.accuLsPkgName);
            });
          }
          this.setState({
            respList: respListArr,
            isExceedCeiling: Number(response.data.isExceedCeiling) === 1 ? '是' : '否',
            accuLsPkgIdsList: accuArr,
          });
        }
      });
    }
  };

  // 模态框显隐
  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  render() {
    const {
      modalVisible,
      userType,
      payWay,
      respList,
      isExceedCeiling,
      accuLsPkgIdsList,
    } = this.state;
    const { accuUpdateData, loading = false, biglibraryData } = this.props;

    return (
      <Modal
        width={1200}
        title="公积金账户"
        visible={modalVisible}
        footer={[
          <Button type="primary" onClick={() => this.handleModalVisible(false)}>
            关闭
          </Button>,
        ]}
        onCancel={() => this.handleModalVisible(false)}
        destroyOnClose
      >
        <Spin tip="loading..." spinning={loading}>
          {payWay === 1 ? (
            <DescriptionList>
              <Description key="custName" term="客户名称 ">
                {accuUpdateData.custName || '--'}
              </Description>
              <Description key="accoName" term="公积金账户名称 ">
                {accuUpdateData.accoName || '--'}
              </Description>
              <Description key="uniCreditCode" term="统一社会信用代码">
                {accuUpdateData.uniCreditCode || '--'}
              </Description>
              <Description key="areaName" term="地区">
                {accuUpdateData.areaName || '--'}
              </Description>
              <Description key="orgName" term="单位名称">
                {accuUpdateData.orgName || '--'}
              </Description>
              <Description key="accuOrg" term="所属公积金机构">
                {accuUpdateData.accuOrg || '--'}
              </Description>
              <Description key="payWayName" term="支付方式">
                {accuUpdateData.payWayName || '--'}
              </Description>
              <Description key="exceedCeilingFlagName" term="是否可突破上限">
                {accuUpdateData.exceedCeilingFlagName || '--'}
              </Description>
              <Description key="custBankAcc" term="银行账户信息">
                {accuUpdateData.custBankAcc || '--'}
              </Description>
              <Description key="doneFlagName" term="是否开户完成">
                {accuUpdateData.doneFlagName || '--'}
              </Description>
              <Description key="accuPkgName" term="公积金组合">
                {accuUpdateData.accuPkgName || '--'}
              </Description>
              {userType === 4 && (
                <Description key="respNameList" term="申报负责人">
                  {accuUpdateData.respNameList || '--'}
                </Description>
              )}
              <Description key="remark" term="备注">
                {accuUpdateData.remark || '--'}
              </Description>
            </DescriptionList>
          ) : (
            <DescriptionList>
              <Description key="accoName" term="大库名称 ">
                {biglibraryData.accoName || '--'}
              </Description>
              <Description key="unitName" term="公司名称">
                {biglibraryData.unitName || '--'}
              </Description>
              <Description key="uniCreditCode" term="统一社会信用代码">
                {biglibraryData.uniCreditCode || '--'}
              </Description>
              <Description key="areaName" term="开户地区">
                {biglibraryData.areaName || '--'}
              </Description>
              <Description key="blngAccoOrg" term="所属公积金机构">
                {biglibraryData.blngAccoOrg || '--'}
              </Description>
              <Description key="isExceedCeiling" term="是否突破上线">
                {isExceedCeiling}
              </Description>
              <Description key="accuLsPkgIdsList" term="公积金组合">
                {accuLsPkgIdsList}
              </Description>
              <Description key="custBankName" term="开户行">
                {biglibraryData.custBankName || '--'}
              </Description>
              <Description key="custBankId" term="银行账号">
                {biglibraryData.custBankId || '--'}
              </Description>
              {Number(userType) === 2 ? (
                <Description key="remark" term="备注">
                  {biglibraryData.remark || '--'}
                </Description>
              ) : (
                <div>
                  <Description key="respList" term="申报负责人">
                    {respList}
                  </Description>
                  <Description key="remark" term="备注">
                    {biglibraryData.remark || '--'}
                  </Description>
                </div>
              )}
            </DescriptionList>
          )}
        </Spin>
      </Modal>
    );
  }
}
export default AccuModal;
